<template>
	<view class="box">
		<view class="text">
			<view class="text1">其他关注的人也喜欢</view>
			<view class="text2">更多</view>
		</view>
		<scroll-view scroll-x="true" class="scrollView">
			<view v-for="(item,index) in 10"  class="scrollChild">
				<image src="../../static/logo.png"></image>
				<view class="childIcon">
					<view class="childIcon1">科技日报</view>
					<image class="childIcon2" src="../../static/yes.jpg"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.box{
		.text{
			display: flex;
			margin: 5vw;
			.text1{
				/* 向左对齐 */
				  margin-right: auto;
				  color: #999;
			}
			.text2{
				/* 向右对齐 */
				margin-left: auto;
			}
		}
		.scrollView {
			margin: 5vw;
			width: 90vw;
			height: 270rpx;
			// border: 1px solid red;
			white-space: nowrap;
		
			.scrollChild {
				text-align: center;
				image{
					margin-top: 15rpx;
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
				}
				width: 100px;
				height: 95%;
				// background: green;
				display: inline-block;
				margin: 5px;
				.childIcon{
					margin-top: 15rpx;
					margin-left: 5rpx;
					display: flex;
					.childIcon1{
						font-size: 35rpx;
					}
					.childIcon2{
						margin-top: 7rpx;
						width: 35rpx;
						height: 35rpx;
						
					}
				}
			}
		}
	}
</style>